<script lang="ts" setup>
import { ref, PropType, watch, computed, watchEffect, onMounted } from 'vue';
import { IconCaretDown } from '@arco-design/web-vue/es/icon';
import { Priod } from '@/constants/indexTree';
const props = defineProps({
  pickerWidth: {
    type: String
  },
  styleWidth: {
    type: String
  },
  modelValue: {
    type: Object as PropType<any>
  },
  timeSelectData: {
    type: Object as PropType<any>
  },
  timeTypeoption: {
    type: Array,
    default: () => {
      return [];
    }
  },
  size: {
    type: String
  },
  compareTimeText: {
    type: String
  }
});
const {
  styleWidth,
  timeSelectData,
  timeTypeoption,
  modelValue,
  size,
  pickerWidth
} = props;
const timeOptionRes = ref();

const timeData = ref();
const selectSize = ref<any>();
selectSize.value = size;
const emit = defineEmits(['changeNumber', 'handleChangeDateMode']);
const changeNumber = (v: any) => {
  emit('changeNumber', v);
};

const changePicker = () => {};
const handleChangeDateMode = (v: any) => {
  emit('handleChangeDateMode', v);
};
const timeUnit = ref()

watch(
  () => modelValue,
  (val) => {
    timeData.value = val;
    timeUnit.value  = val.dateCondition.timeUnit;
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => timeTypeoption,
  (newVal, oldVal) => {
    timeOptionRes.value = newVal;
  },
  {
    immediate: true
  }
);
</script>

<template>
  <a-select
    v-model="timeData.dateCondition.dateMode"
    @change="handleChangeDateMode"
    style="width: 116px"
    :size="selectSize"
    :options="timeOptionRes"
  >
    <template #arrow-icon>
      <icon-caret-down />
    </template>
  </a-select>
    <div
      v-show="timeData.dateCondition.dateMode != 'FIXDATE'"
      style="display: flex; align-items: center"
    >
      <div v-show="timeData.dateCondition.dateMode != 'TODAY'">
        <a-input-number
          
          :class="['ml-6','showSuffix', styleWidth]"
          :size="selectSize"
          @change="changeNumber"
          v-model="timeData.dateCondition.offset"
          :min="1"
          :precision="0"

        />
        <span  class="ml-6 unit">{{ Priod[timeUnit] }} 
          <span v-show="props.compareTimeText">{{props.compareTimeText}}</span>
        </span>
    </div>
    </div>
    <div v-show="timeData.dateCondition.dateMode === 'FIXDATE'">
      <a-week-picker
        v-if="timeUnit === 'WEEK'"
        @change="changePicker"
        :class="['ml-6', pickerWidth]"
        :size="selectSize"
        v-model="timeData.dateCondition.fixDate"
      />
      <a-month-picker
        v-else-if="timeUnit === 'MONTH'"
        @change="changePicker"
        :class="['ml-6', pickerWidth]"
        :size="selectSize"
        v-model="timeData.dateCondition.fixDate"
      />
      <a-quarter-picker
        v-else-if="timeUnit === 'QUARTER'"
        @change="changePicker"
        :class="['ml-6', pickerWidth]"
        :size="selectSize"
        v-model="timeData.dateCondition.fixDate"
      />
      <a-date-picker
        v-else
        @change="changePicker"
        :class="['ml-6', pickerWidth]"
        :size="selectSize"
        v-model="timeData.dateCondition.fixDate"
      />
    </div>
</template>

<style lang="scss" scoped>
.showSuffix ::v-deep(.arco-input-number-step) {
  opacity: 1;
}
</style>
